import * as React from "react";
interface IStyle {
  [key: string]: any
}

interface IMyProps {
  width?: number
  height?: number
  mode?: string // contain,cover
  url?: string
  content?: string
  style?: IStyle
}

interface IMyState {
  count:number
  
}
class MyWebGlb extends React.Component<IMyProps,IMyState> {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  componentDidMount(): void {
    // const canvas = document.getElementById("myCanvas");
    // const gl = canvas.getContext("webgl") ;
    const canvas: HTMLCanvasElement = document.createElement('canvas');
    const gl: CanvasRenderingContext2D = canvas.getContext('2d')!;
    gl.clearRect(1, 0, 0, 1);
    // gl.viewport(0, 0, 100, 190);
    gl.fillStyle = "#ffFF00";
    // gl.clear(gl.COLOR_BUFFER_BIT);
    gl.fillRect(0, 0, 100, 100);
  }
  public render(): JSX.Element {
    const style =  {
      backgroundSize: this.props.mode || "contain",
      width: this.props.width || "100%",
      height: this.props.height || "100%",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center center",
      backgroundImage: "",
      border:'1px solid black',
      ...this.props.style
    };

    let url = null;
    if (this.props.url) {
      url = "url(" + this.props.url + ")";
    }
    if (this.props.content) {
      url = "url(" + "data:image/*;base64," + this.props.content + ")";
    }

    style.backgroundImage = url;

    return (
      <div style={style}>
         <canvas
          id="myCanvas"
          width="200"
          height="100"
          style={style}
        ></canvas>
         </div>
    );

  }
}
export default MyWebGlb;
